// 此模块构建视图层

// 导出地图模块显示页面
import {
    PLAYER,
    BOX,
    WALL,
    map,
    correct,
    colNumber,
    rowNumber,
} from "./map.js";

let gameContainer = document.getElementById("game");
let pieceWidth = 45; // 小方块宽度
let pieceHeight = 45; // 小方块高度

/**
 * 设置游戏面板容器
 */
function setGameContiner() {
    gameContainer.style.width = pieceWidth * colNumber + "px";
    gameContainer.style.height = pieceHeight * rowNumber + "px";
}

/**
 * 判断该列是否为正确位置（也就是箱子是否在正确位置）
 * @param {列} row
 * @param {行} col
 */
function isCorrent(row, col) {
    return (
        correct.find((item) => item.row === row && item.col === col) !==
        undefined
    );
}

/**
 * 设置游戏面板内容生成一个地图元素
 * @param {列} row
 * @param {行} col
 */
function setOnePiece(row, col) {
    let value = map[row][col]; // 获取地图中对应值查看是墙，人，箱子
    let div = document.createElement("div");
    div.className = "item"; // 给定基本样式
    // 设置显示位置
    div.style.left = col * pieceWidth + "px";
    div.style.top = row * pieceHeight + "px";

    // 查看当前创建是什么元素
    let correct = isCorrent(row, col);
    if (value === PLAYER) {
        // 当是人时
        div.classList.add("player");
    } else if (value === WALL) {
        // 当时墙时
        div.classList.add("wall");
    } else if (value === BOX) {
        // 当时箱子时（有两种，一种是正确箱子）
        if (correct) {
            div.classList.add("correct-box");
        } else {
            div.classList.add("box"); // 不动的箱子
        }
    } else {
        if (correct) {
            div.classList.add("correct");
        } else {
            return false;
        }
        // 空白不做处理
    }
    gameContainer.appendChild(div); // 添加元素
}

function renderContent() {
    // 执行前先清空容器（因为推动箱子地图在改变）
    gameContainer.innerHTML = "";
    // 遍历地图生成内容设置元素
    for (let row = 0; row < rowNumber; row++) {
        // 行
        for (let col = 0; col < colNumber; col++) {
            // 列
            setOnePiece(row, col);
        }
    }
}

// 导出构建视图的方法
export default function () {
    // 设置容器 game
    setGameContiner();
    // 渲染地图内容
    renderContent();
}
